import { useEffect, useState } from "react";
import { Image, StyleSheet, View } from "react-native";
import * as React from "react";

const AutoHeightImage = ({ uri, fixedWidth }) => {
    const [imageHeight, setImageHeight] = useState(0);

    useEffect(() => {
        // 使用 Image.getSize 获取网络图片的宽高
        Image.getSize(
            uri,
            (width, height) => {
                // 计算新的高度，根据固定的宽度
                const scaleFactor = fixedWidth / width;
                const newHeight = height * scaleFactor;
                setImageHeight(newHeight);
            },
            (error) => {
                console.error("Failed to load image dimensions:", error);
            }
        );
    }, [uri, fixedWidth]);

    return (
        <Image
            source={{ uri }}
            style={{
                width: fixedWidth, // 固定宽度
                height: imageHeight, // 动态高度
            }}
        />
    );
};

export default AutoHeightImage;
